<template>
  <view class="h-100vh flex-v">
    <uni-search-bar radius="100" placeholder="请输入文档搜索关键词" bg-color="#ffffff" @confirm="search" />
    <view class="">
      <scroll-view scroll-x>
        <view class="tabs flex-a">
          <view v-for="(item, i) in category" :key="item.id" class="tab-item" :class="tabIndex === i ? 'tab-itemActive' : ''" @click="onTab(i)">{{ item.title }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="flex-1 flex overflow-y-hidden">
      <scroll-view scroll-y class="h-full sidebar">
        <view v-for="(item, i) in sidebar" :key="item.id" class="sidebar-item flex-ca" :class="sidebarIndex === i ? 'sidebar-itemActive' : ''" @click="onSidebar(i)">
          {{ item.title }}
        </view>
      </scroll-view>
      <scroll-view scroll-y class="flex-1 h-full bg-white">
        <view class="third-list">
          <view v-for="item in thirdList" :key="item.id" class="mb-30">
            <view class="text-16 mb-20 flex-ba">
              <view class="font-bold">{{ item.title }}</view>
              <view class="text-12 text-info" @click="goMore(item.id)">更多<text class="text-12 ml-2 iconfont icon-right" /></view>
            </view>
            <view v-for="v in item.list" :key="v.id" class="flex-a leading-20 mb-20" @click="goFile(v.id)">
              <view class="third-itemDot" />
              <view class="ellipsis-1">{{ v.name }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    free: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      category: [],
      tabIndex: -1,
      sidebarIndex: -1,
      thirdList: []
    }
  },
  computed: {
    sidebar() {
      return this.category?.[this.tabIndex]?.children ?? []
    },
    indexs() {
      return [this.tabIndex, this.sidebarIndex]
    }
  },
  watch: {
    indexs(val) {
      this.getList()
    }
  },
  async mounted() {
    const [err, res] = await this.$f.awaitTo(this.categoryReady)()
    if (!err) {
      this.category = res
      this.tabIndex = 0
      this.sidebarIndex = 0
    }
  },
  methods: {
    search() {
			
    },
    goFile(id) {
      this.$Router.push('/pages/detail/file?id=' + id)
    },
    goMore(id) {
      let path = '/pages/index/nav?fcId=' + id 
      if (this.free) path += `&free=1`
      this.$Router.push(path)
    },
    onTab(i) {
      if (i !== this.tabIndex) {
        this.tabIndex = i
        this.sidebarIndex = 0
      }
    },
    onSidebar(i) {
      this.sidebarIndex = i
    },
    getsidebarIndex() {
      return this.category?.[0]?.children?.[0]?.id ?? 0
    },
    getThirdList() {
      const [tabIndex, sidebarIndex] = this.indexs
      const list = this.category?.[tabIndex]?.children?.[sidebarIndex]?.children ?? []
      return list.map(v => ({
        id: v.id,
        title: v.title,
        list: []
      }))
    },
    getList() {
      const list = this.getThirdList()
      this.thirdList = list
      this.$f.post('api/thirdList', { list, free: this.free }).then(res => {
        this.thirdList = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.tabs {
	height: 80rpx;
	padding: 0 16rpx 16rpx;
}
.tab-item {
	font-size: 32rpx;
	margin: 0 32rpx;
}
.tab-itemActive {
	position: relative;
	font-size: 44rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
	z-index: 1;
	&::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 8rpx;
		border-radius: 8rpx;
		background-color: $uni-primary;
		bottom: 4rpx;
		z-index:  -1;
	}
}
.sidebar {
	width: 200rpx;
	font-size: 32rpx;
}
.sidebar-item {
	height: 120rpx;
	padding: 0 20rpx;
}
.sidebar-itemActive {
	position: relative;
	background-color: #fff;
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 8rpx;
		height: 60rpx;
		border-radius: 4rpx;
		transform: translateY(-50%);
		background-color: $uni-primary;
	}
}
.third-list {
	padding: 30rpx;
	box-sizing: border-box;
}
.third-itemDot {
	position: relative;
	width: 28rpx;
	height: 28rpx;
	margin-right: 10rpx;
	background-color: #F5F9FF;
	border-radius: 50%;
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background-color: $uni-primary;
	}
}
</style>
